<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>定制海报</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/poster.css">
</head>

<body>
    <div id="posterBox">
        <div id="lunbo">
            <!-- 当轮播图只有一张的时候才可以拖拽图片，多张时拖拽会是轮播效果 -->
            <div class="picBox" num="1" id="curPost">
                <img src="./images/backimg2.jpg">
            </div>
            <!-- <div class="picBox" num="2">
                <img src="./images/backImg2.png">
                <img src="./images/posterimg.jpg" class="backImg" alt="">
            </div> -->
            <!-- <div class="picBox" num="3">
                <img src="./images/backImg2.png">
                <img src="./images/posterimg.jpg" class="backImg" alt="">
            </div>
            <div class="picBox" num="4">
                <img src="./images/backImg2.png">
                <img src="./images/posterimg.jpg" class="backImg" alt="">
            </div> -->
        </div>
    </div>
    <div id="getPosterImg">定制宝贝专属海报</div>
    <div id="share">
        <div id="shareFriend">
            <img src="./images/weixin.png" alt="">
            <p>微信好友</p>
        </div>
        <div id="shareFriendCircle">
            <img src="./images/pengyouquan.png" alt="">
            <p>朋友圈</p>
        </div>
    </div>
    <script src="./js/jq.min.js"></script>
    <script src="./js/sha.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="./js/poster.js"></script>
    <script>
        var curUrl = location.href;
        var ticket = "";
        $.ajax({
            type: "get",
            url: `http://139.186.155.167/api/common/sign?url=${curUrl}`,
            success: function (res) {
                console.log(res);
                ticket = res.data.ticket;
                console.log(ticket);
                let timestamp = Date.parse(new Date()) / 1000;
                console.log(timestamp);
                let nonceStr = randomString(12);
                console.log(nonceStr);
                let str =
                    `jsapi_ticket=${ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${curUrl}`;

                console.log(str);
                str = hex_sha1(str);
                console.log(str);
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: 'wxae0b6f3846bc6d0f', // 必填，公众号的唯一标识
                    timestamp: timestamp, // 必填，生成签名的时间戳
                    nonceStr: nonceStr, // 必填，生成签名的随机串
                    signature: str, // 必填，签名
                    jsApiList: [
                        //JSSDK1.4以后，微信分享功能用新接口，但是在接口注册的时候，必须把新老接口都加上去，不然不起作用
                        'checkJsApi',
                        'onMenuShareTimeline', //分享到微信朋友圈
                        'onMenuShareAppMessage', //分享给微信朋友
                        // 'onMenuShareQQ', //分享到QQ
                        // 'onMenuShareQZone', //分享到QQ空间
                        'updateAppMessageShareData', //分享到微信及QQ（新接口）
                        'updateTimelineShareData' //分享到朋友圈”及“分享到QQ空间（新接口
                    ] // 必填，需要使用的JS接口列表
                });

                $("#shareFriend").click(function (e) {
                    wx.updateAppMessageShareData({ //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
                        title: 'shareFriend', // 分享标题
                        desc: '我是分享描述', // 分享描述
                        link: 'http://t.kexuemihe.com/studentPort/inviteFriend.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'http://t.kexuemihe.com/images/zanting.png', // 分享图标
                        success: function () {
                            // 设置成功
                            console.log("分享给朋友设置成功")
                        }
                    });
                });
                $("#shareFriendCircle").click(function () {
                    wx.updateTimelineShareData({ //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
                        title: 'shareFriendCircle', // 分享标题
                        link: 'http://t.kexuemihe.com/studentPort/inviteFriend.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'http://t.kexuemihe.com/images/zanting.png', // 分享图标
                        success: function () {
                            // 设置成功
                            console.log("分享到朋友圈设置成功")
                        }
                    })
                })
            }
        });
        // 随机字符串
        function randomString(e) {
            e = e || 32; //默认32位
            var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
                a = t.length,
                n = "";
            for (i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
            return n
        }
        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            wx.updateAppMessageShareData({ //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
                title: 'shareFriend', // 分享标题
                desc: '我是分享描述', // 分享描述
                link: 'http://t.kexuemihe.com/studentPort/poster.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://t.kexuemihe.com/studentPort/images/backImg2.png', // 分享图标
                success: function () {
                    // 设置成功
                    console.log("设置成功")
                }
            });
            wx.updateTimelineShareData({ //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
                title: 'shareFriendCircle', // 分享标题
                link: 'http://t.kexuemihe.com/studentPort/poster.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://t.kexuemihe.com/studentPort/images/backImg2.png', // 分享图标
                success: function () {
                    // 设置成功
                    console.log("设置成功")
                }
            })
        });
        wx.error(function (res) {
            console.log(res);
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
    </script>
</body>

</html>